<template>
	<view class="content">
		<view class="project-list" v-for="info in infos" :key="info.id">
			<view @click="goIncreaselDetail('edit',info.id,info.project_id)" class="communication-item">
				<view>
					<text>沟通方式：</text>
					<text>{{type[info.contact_type]}}</text>
				</view>
				<view>
					<text>沟通目标：</text>
					<text>{{info.expect}}</text>
				</view>
				<view>
					<text>沟通日期：</text>
					<text>{{info.contact_date}}</text>
				</view>
				<view>
					<text>沟通信息：</text>
					<text>{{info.result}}</text>
				</view>
			</view>
			<view class="uni-padding-wrap">
				<scroll-view class="scroll-view_H" scroll-x="true" @scroll="scroll">
					<view class="image-item scroll-view-item_H" v-for="(item,i) in info.img_url" :key="i">
						<image class="scroll-view-item_H" mode="aspectFill" :src="item" @error="imageError" @click="previewImage(info.img_url,i)"></image>
					</view>
				</scroll-view>
			</view>
		</view>
		<view>
			<uni-load-more v-if="!noData" :loadingType="loadingType" :contentText="contentText"></uni-load-more>
		</view>
		<!-- #ifdef MP-WEIXIN -->
		<uni-fab :horizontal="horizontal" :vertical="vertical" uniIcon="plusempty" @longpress="fadlongpress" @onlyOne="fadOnlyOne()"></uni-fab>
		<!-- #endif -->
		<view v-if="noData" class="cus-no-data">
			<text class="def-icon">&#xe64b;</text>
			<text> 暂 无 数 据 . . . </text>
		</view>
	</view>
</template>

<script>
	import {
		communicationArray
	} from '../../common/stateData.js'
	export default {
		data() {
			return {
				infos: [], //增项列表数据
				noData: false, //增项列表数据是否为空
				projectId: null, //项目id(在新增的时候需要传过去)
				searchForm: {
					crm_id: null,
					page_no: 1, //当前页
					page_size: 10,
				},
				loadingType: 0,
				contentText: {
					contentdown: "上拉显示更多",
					contentrefresh: "正在加载...",
					contentnomore: "没有更多数据了"
				},
				type: {
					mobile: '电话',
					weixin: '微信',
					interview: '面谈',
				},
				horizontal: 'left',
				vertical: 'bottom'
			}
		},
		onLoad(param) {
			this.searchForm.crm_id = parseInt(param.id)
			this.getCommunications()
			this.$eventBus.$on('communicationUpdateExecute', () => {
				this.getCommunications()
			})
		},
		//标题栏中右上角新增按钮
		onNavigationBarButtonTap() {
			uni.navigateTo({
				url: './communicationEdit?id=' + this.searchForm.crm_id
			})
		},
		onReachBottom() {
			if (this.loadingType !== 0) {
				return;
			}
			this.searchForm.page_no++
			this.loadingType = 1
			uni.request({
				url: this.$store.state.baseUrl + '/lwj/app_crm_appointment_search',
				method: 'POST',
				header: {
					token: this.$store.state.token
				},
				data: this.searchForm,
				success: res => {
					if (res.data.code === 1) {
						this.infos.push(...res.data.data.list)
						if (res.data.data.list.length < this.searchForm.page_size) {
							this.loadingType = 2
						} else {
							this.loadingType = 0
						}
					}
				},
				fail: () => {},
				complete: () => {}
			});
		},
		methods: {
			fadlongpress() { // 悬浮按钮长按
				if (this.vertical === 'top') {
					this.vertical = 'bottom'
				} else {
					this.vertical = 'top'
				}
			},
			fadOnlyOne() {
				uni.navigateTo({
					url: './communicationEdit?id=' + this.searchForm.crm_id
				})
			},
			//获取列表数据
			getCommunications() {
				uni.showLoading({
					title: '',
					mask: false
				});
				uni.request({
					url: this.$store.state.baseUrl + '/lwj/app_crm_appointment_search',
					method: 'POST',
					header: {
						token: this.$store.state.token
					},
					data: {
						...this.searchForm
					},
					success: res => {
						if (res.data.code === 1) {
							if (res.data.data.list.length === 0) {
								this.noData = true
							} else {
								this.noData = false
								this.infos = res.data.data.list
								res.data.data.list.map((list, index) => {
									this.infos[index].img_url = []
									list.att_list.map((item, i) => {
										this.infos[index].img_url.push(item.imgurl)
									})
								})
							}
							if (res.data.data.list.length < this.searchForm.page_size) {
								this.loadingType = 2
							} else {
								this.loadingType = 0
							}
						} else {
							uni.showToast({
								icon: "none",
								title: '请求出错. . .',
								duration: 3000
							});
						}
					},
					fail: () => {},
					complete: () => {
						uni.hideLoading()
					}
				});
			},
			//点击跳转到详情页(参数：是否编辑，表id，项目id)
			goIncreaselDetail(e, tebleId, projectId) {
				// 如果是编辑的话，就要把信息带过去，新增不用传值
				if (e === 'edit') {
					uni.navigateTo({
						url: './increaseItemEdit?order_id=' + tebleId + '&hard_id=' + projectId,
						success: res => {},
						fail: () => {},
						complete: () => {}
					});
				} else {
					uni.navigateTo({
						url: './increaseItemEdit?hard_id=' + projectId,
						success: res => {},
						fail: () => {},
						complete: () => {}
					});
				}
			},
			previewImage(imgList, i) {
				uni.previewImage({
					current: imgList[i],
					urls: imgList
				})
			}
		}
	}
</script>

<style scoped>
	.project-list {
		position: relative;
	}

	.image-item image {
		width: 150upx;
		height: 150upx;
		margin-right: 10upx;
	}

	.image-list {
		display: flex;
		flex-direction: row;
		width: 100%;
		flex-wrap: wrap;
	}

	.scroll-view_H {
		white-space: nowrap;
		width: 100%;
	}

	.scroll-view-item {
		height: 150upx;
		line-height: 150upx;
	}

	.scroll-view-item_H {
		display: inline-block;
		width: 180upx;
		height: 150upx;
		line-height: 150upx;
	}

	.uni-padding-wrap {
		margin-top: 20upx;
		padding: 0;
		width: 665upx;
	}
	.communication-item view {
		display: flex;
		justify-content: space-between;
		padding: 0 20upx;
	}
	.communication-item view text:nth-of-type(2){
		color: #999999;
	}
</style>
